<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <script th:src="@{static/js/vue.js}"></script>
    <script th:src="@{static/js/elementUI.js}"></script>
    <script th:src="@{static/js/axios.js}"></script>
    <link th:href="@{static/css/elementUI.css}" rel="stylesheet"/>
    <style>
        /**/
        .text {
            font-size: 15px;
        }

        .item {
            margin-bottom: 5px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }

        #main {
            width: 80%;
            margin: auto;
            margin-top: 10px;
        }

        #dataTable {
            margin-top: 10px;
        }

        #form {
            line-height: 60px;
        }

        #top {
            /*height: 100px;*/
            /*overflow: hidden;*/
        }

        div {
            /*border: 1px red solid;*/
        }
    </style>
</head>

<body>
<div id="top">
    <el-card class="box-card" style="background-color: #EBEEF5">
        <span style="margin-left: 9%;margin-top: 5px;background-color: #3a8ee6;font-size: 15px">&nbsp;&nbsp;</span>
        <span style="font-size: 15px;margin-left: 10px">帮助管理</span>
        <el-button style="float: right; padding: 3px 0;margin-right: 10%" type="text">刷新</el-button>
    </el-card>
</div>
<div id="main">
    <div id="form">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="height: 20px;line-height: 20px">
                <span style="font-size: 15px">筛选查询</span>
                <el-button style="float: right; padding: 3px 0" type="text" >操作按钮</el-button>
            </div>

            <!--查询模态框的样式-->
           <!-- <el-dialog title="你好" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="内容" :label-width="formLabelWidth">
                        <el-input v-model="form.content" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="add()">确认</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    &lt;!&ndash; <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button> &ndash;&gt;
                </div>
            </el-dialog>-->


            <div align="left">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="关键字查询" style="margin-left: 20px">
                        <el-input v-model="formInline.qa_titel" placeholder="部门职能关键字"
                                  style="margin-top: 15px"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名字">
                        <el-select v-model="formInline.qa_category" placeholder="部门名字" style="margin-top: 15px">
                            <el-option label="董事会" value="董事会"></el-option>
                            <el-option label="财务部" value="财务部"></el-option>
                            <el-option label="销售部" value="销售部"></el-option>
                            <el-option label="后勤部" value="后勤部"></el-option>
                            <el-option label="风控部" value="风控部"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" style="margin-top: 15px">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

    </div>
    <div id="dataTable">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="font-size: 15px">数据列表</span>
                <el-button style="float: right; padding: 3px 0" type="primary" plain @click="addEntranceRuleModel=true">新增准入配置</el-button>&nbsp;

                <!--添加模态框样式add-->
                <el-dialog title="你好" :visible.sync="addEntranceRuleModel">
                    <el-form :model="addEntranceRuleForm">
                        <el-form-item label="准则编号" :label-width="formLabelWidth">
                            <el-input v-model="addEntranceRuleForm.no" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="准则名称" :label-width="formLabelWidth">
                            <el-input v-model="addEntranceRuleForm.ruleName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="准则描述" :label-width="formLabelWidth">
                            <el-input v-model="addEntranceRuleForm.ruleDesc" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="开启时间" :label-width="formLabelWidth">
                            <el-input v-model="addEntranceRuleForm.startTime" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="结束时间" :label-width="formLabelWidth">
                            <el-input v-model="addEntranceRuleForm.endTime" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="命中次数" :label-width="formLabelWidth">
                            <el-input v-model="addEntranceRuleForm.userNum" autocomplete="off"></el-input>
                        </el-form-item>

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="addEntranceRule()">确认</el-button>
                        <el-button @click="addEntranceRuleModel = false">取消</el-button>
                        <!-- <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button> -->
                    </div>
                </el-dialog>
            </div>
            <template>
                <!--  给表格绑定数据，tableData即为后端传过来的数据  -->
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <!--  用porp给这一列绑定 tableData中对应的属性 ，type=selection表示这一列是复选框 -->
                    <el-table-column
                            prop="id"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <!--  label="编号"表示这一列的表头是“编号”,width代表这一列宽度 -->
                    <el-table-column
                            prop="no"
                            label="准入规则编号"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="ruleName"
                            label="规则名称"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="ruleDesc"
                            label="规则描述"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="startTime"
                            label="开始时间"
                            width="220"
                            type="date"
                            value-format='yyyy-MM-dd'>
                    </el-table-column>
                    <el-table-column
                            prop="endTime"
                            label="结束时间"
                            width="220"
                            type="date"
                            value-format='yyyy-MM-dd'>
                    </el-table-column>
                    <el-table-column
                            prop="userNum"
                            label="命中次数"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            label="关停/开启"
                            width="100">
                        <template scope="scope">
                            <el-switch
                                    on-text ="是"
                                    off-text = "否"
                                    on-color="#5B7BFA"
                                    off-color="#dadde5"
                                    v-model="scope.row.useStatus"
                                    @change=change(scope.row)>
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作"
                                     width="200">
                        <template scope="scope">
                            <el-button style="float:left; padding: 3px 0" type="text" plain
                                       @click="updateModelEntranceRule(scope.row)">查看&编辑</el-button>

                            <!--查看编辑的模态框-->
                            <el-dialog title="编辑准入规则" :visible.sync="updateEntranceRuleForm">
                                <el-form :model="update">
                                    <el-form-item label="规则编号" :label-width="formLabelWidth">
                                        <el-input v-model="update.no" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="规则名称" :label-width="formLabelWidth">
                                        <el-input v-model="update.ruleName" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="规则描述" :label-width="formLabelWidth">
                                        <el-input v-model="update.ruleDesc" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="开启时间" :label-width="formLabelWidth">
                                        <el-input v-model="update.startTime" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="结束时间" :label-width="formLabelWidth">
                                        <el-input v-model="update.endTime" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="命中次数" :label-width="formLabelWidth">
                                        <el-input v-model="update.userNum" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click=entranceRule_update(scope.row)>确 定</el-button>
                                    <el-button @click="updateEntranceRuleForm = false">取 消</el-button>
                                </div>
                            </el-dialog>

                            <!--删除操作-->
                            <el-popconfirm
                                    title="确认删除本条信息？"
                                    @confirm=entranceRule_del(scope.row)>
                                <el-button slot="reference" style="float: left; padding: 3px 0;margin-left: 10px" type="text">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>

                </el-table>
            </template>
            <template>
                <div class="block">
                    <!-- size-change绑定的是每页显示数量变化时执行的方法，
                     current-change绑定的是翻页时执行的方法，
                     page-sizes属性中的数组是 “每页显示多少条” 下拉框中的数据，
                     page-size属性时当前显示条数，
                     layout是翻页控件的布局顺序，
                     total绑定的是总共多少条数据-->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>
        </el-card>
    </div>
</div>
<script th:inline="javascript">
    let app = new Vue({
        el: '#main',
        data: {
            //模态框可视
            addEntranceRuleModel:false,
            updateEntranceRuleForm:false,
            //表格数据
            tableData: [],
            //总条数
            pageSize: 10,
            //当前页
            currentPage: 1,
            total: 0,
            formInline: {
                adsName: '',
                adsLocation: ''
            },
            //添加准则
            addEntranceRuleForm: {
                 no: '',//编号
                ruleName: '',//准则名称
                ruleDesc:"",//准则描述
                startTime:'',//开启时间
                endTime:'',//结束时间
                userNum:''//命中次数
            },
            //修改
            update:{
                id:'',
                no: '',//编号
                ruleName: '',//准则名称
                ruleDesc:"",//准则描述
                startTime:'',//开启时间
                endTime:'',//结束时间
                userNum:'',//命中次数
            },
            formLabelWidth: '120px'
        },
        methods: {
            //向后端发起请求，加载表格内容，传的参数是当前查第几页
            getData(val) {
                axios.get([[@{entranceRule/page}]],{
                    params:{
                        //每页多少条
                        limit:this.pageSize,
                            //从什么地方开始查
                            offSet: 0,
                            //当前查第几页
                            pageNum:val,
                            //排序字段和排序方式
                            sort:"start_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                    }
                }
            ).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                    for (let i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].status === "1") {
                            this.tableData[i].status = true;
                        }
                    }
                }).catch(error => {

                })
            },
            //改变每页显示数据条数时执行的方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.getData(this.currentPage);
            },
            //翻页时执行的方法
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getData(this.currentPage);
            },

            change: function (row) {
                console.log(row);
            },

            //点击编辑弹出模态框
            updateModelEntranceRule(row){
                this.update.id=row.id;
                this.update.no=row.no;
                this.update.ruleDesc=row.ruleDesc;
                this.update.ruleName=row.ruleName;
                this.update.startTime=row.startTime;
                this.update.endTime=row.endTime;
                this.update.userNum=row.userNum;
                this.updateEntranceRuleForm=true;
            },

            //修改准则配置
            entranceRule_update(){
              axios({
                  method:'PUT',
                  url:[[@{entranceRule/update}]],
                  data:this.update
              }).then((res) => {
                    this.updateEntranceRuleForm=false;
                    this.getData(this.currentPage);
                }).catch((e)=>{
                })
            },
            //删除时的方法
            entranceRule_del(val){
                axios.delete([[@{entranceRule/}]]+val.id,{
                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.getData(this.currentPage);
                }).catch(error => {
                    //console.log(error);
                })
            },

            //修改状态的请求
            change:function(row){
                let now_status = row.useStatus?"0":"1";
                axios.put([[@{entranceRule/status/}]]+row.id+"/"+now_status,{
                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                }).catch(error => {
                    console.log(error);
                })
            },

            //像后端发起添加部门请求,
            addEntranceRule(){
                axios({
                    method:'POST',
                    url:[[@{entranceRule/add}]],
                data:this.addEntranceRuleForm
                }).then(res => {
                    this.addEntranceRuleModel=false;
                        this.getData(this.currentPage);
                    }).catch(error => {
                   // console.log(error);
    })},


            //表单提交
            onSubmit() {
                axios.get([[@{dept/find}]],{
                    params:{
                        //每页多少条
                        limit:this.pageSize,
                            //从什么地方开始查
                            offSet:0,
                            //当前查第几页
                            pageNum:1,
                            //排序字段和排序方式
                            sort:"create_time",
                            sortOrder:"desc",
                            //要传属性的继续写在下面
                            qaTitel:this.formInline.qa_titel,
                            qaCategory:this.formInline.qa_category
                    }
                }).then(res => {
                    //将查询到的数据赋给表格中绑定的变量
                    this.total = res.data.total;
                    this.tableData = res.data.rows;
                    for(let i = 0 ;i<this.tableData.length;i++){
                        if(this.tableData[i].status === 0){
                            this.tableData[i].status = true;
                        }
                    }
                }).catch(error => {
                    console.log(error);
                })
            }
    },
    //创建时执行查询，查第一页
    created : function () {
        this.getData(1);
    }
    });
    let app3 = new Vue({
        el:"#top"
    })
</script>
</body>
</html>